<template>
  <el-card class="box-card">
    <!-- 查询条件-->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input placeholder="请输入新闻类型(模糊查询)" v-model="form.name"></el-input>
      </el-col>

      <el-col :span="6">
        <el-button type="primary" icon="el-icon-search" @click="query()">查询</el-button>
        <el-button type="danger" icon="el-icon-delete" size="small" @click="clearQuery()">清空查询</el-button>
      </el-col>
    </el-row>
    <br />
    <el-row :gutter="20">
      <el-col :span="3">
        <el-button type="primary" icon="el-icon-plus" @click="addRole()">新增</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" icon="el-icon-house" @click="back()">返回主页</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="新闻类型"  ></el-table-column>
      <el-table-column prop="state" label="是否显示" width="230px"  >
        <template scope="scope">
            <el-switch
                style="display: block"
                v-model="scope.row.state"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="显示类型"
                inactive-text="隐藏类型" @change="changeState(scope.row)">
            </el-switch>
          </template>
      </el-table-column>

      <el-table-column prop="adminName" label="操作人"  ></el-table-column>
      <el-table-column prop="operTime" label="操作时间" align="center" ></el-table-column>

      <el-table-column fixed="right" label="操作" width="200px" >
        <template slot-scope="scope">
          <el-button type="warning" icon="el-icon-edit" size="small"
                     style="width: 70px;" @click="update(scope.row.id)">编辑</el-button>
          <el-button size="small" type="danger" icon="el-icon-delete"
                     style="width: 70px;"@click="deleteRole(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.pageNum"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <Add ref="add"></Add>
    <Upate ref="update"></Upate>
  </el-card>
</template>

<script>
import Add from './Add.vue';
import Upate from './Upate.vue';
export default {
  components:{
    Add	,Upate
  },
  data() {
    return {
      tableData: [],
      form: {
        id:'',
        name: '',
        state:'',
        pageNum: 1,
        pageSize: 2,
        adminName:'',
        operTime:''
      },
      total:0
    }
  },
  methods: {
    changeState(row){
      this.form.id=row.id;
      this.form.state=row.state;
      this.$confirm('您确定要修改状态吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //添加请求地点
        /*发送修改状态的请求*/
        this.$http.post("admin/NewsTypeCtl/UpdateNewsTypeState", this.form).then((resp) => {
          if (resp.data.code == 200) {
            this.$message({
              showClose: true,
              message: '恭喜你，修改成功✔',
              type: 'success'
            });
            this.$router.go();
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
        this.$router.go();
      });
    },
    clearQuery(){
    this.form.name='';
    },
    deleteRole(id){
      this.$confirm('您确定要删除本条数据吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get("admin/NewsTypeCtl/deleteNewsTypeById?id=" + id).then((resp) => {
          if (resp.data.code == 200) {
            this.$message({
              showClose: true,
              message: '恭喜你，修改成功✔',
              type: 'success'
            });
            this.$router.go();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });


    },
    update(id){
      this.$refs.update.findNewsTypeById(id);
      this.$refs.update.dialogVisible = true;
    },
    addRole() {
      this.$refs.add.dialogVisible= true;
    },
    back() {
      this.$router.go();
    },
    query() {

      this.$http.post("admin/NewsTypeCtl/list", this.form).then((resp) => {
        this.tableData = resp.data.data.list;
        this.total=resp.data.data.total;
      })

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.form.pageSize=val;
      this.form.pageNum=1;
      this.query();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.form.pageNum=val;
      this.query();
    }
  },
  mounted() {
    this.query();
  }
}
</script>

<style>
</style>